<template>
  <div>
    <div class="sell_badge">
    <span>
      <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>今日总销量</span>
        <el-button style="float: right; padding: 3px 0" type="text">详情</el-button>
      </div>
      <div v-for="o in 4" :key="o" class="text item">
        {{ '列表内容 ' + o }}
      </div>
    </el-card>
    </span>
      <span>
      <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>访问量</span>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
        <div
            id="zhuzhuangtu"
            style="width: 300px!important; height: 300px"
        ></div>
      </div>
    </el-card>
    </span>
      <span>
      <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>今日总收入</span>
        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
      </div>
      <div v-for="o in 4" :key="o" class="text item">
        {{ '列表内容 ' + o }}
      </div>
    </el-card>
    </span>
    </div>
    <div class="goodsPhoto" id="goods">

    </div>
  </div>
</template>

<script>


export default {
  name: "SellBadge",
  mounted() {
    let myChart = this.$echarts.init(document.getElementById("goods"));
    let option = {
      xAxis: {
        type: 'category',
        data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: [150, 230, 224, 218, 135, 147, 260],
        type: 'line'
      }]
    };
    myChart.setOption(option);
  },

}
</script>

<style scoped>
.sell_badge {
  display: flex;
  margin-left: 150px;
  margin-top: 19px;
}

.box-card {
  transition: all .5s;
  width: 400px;
  height: 200px;
  margin-left: 30px;
  margin-bottom: 10px;
}
.box-card:hover{
  margin-top: -10px;
}
.goodsPhoto{
  width: 60%;
  margin-left: 150px;
  height: 600px;
  transform: translate(10%);
}
</style>
